import * as echarts from '../components/ec-canvas/echarts';
var http = require('../../script/revenue.js');
import { getRandomColor } from '../../utils/util'
Component({
  options: {
    addGlobalClass: true,
  },
  /**
   * 组件的属性列表
   */
  properties: {
    key: {
      type: Number,
      value: 0
    },
  },
  observers: {
    'key': function (val) {
      if (val != null && val > 0) {
        this.GetData();
      }
    }
  },
  lifetimes: {
    created: function () {
      this.GetData();
    },
    attached: function () {

    },
    ready: function () {
      this.ecComponent_auditproblem = this.selectComponent('#auditproblem-chart-dom');
      this.initAuditProblemChart();
    },
    detached: function () {
      if (this.chart_auditproblem) {
        this.chart_auditproblem.dispose();
        this.chart_auditproblem = null;
      }
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    SumInfo: {
      AuditConsNum: 0,
      AuditFaultNum: 0,
      UntreatedNum: 0,
    },
    ecAuditProblem: {
      lazyLoad: true
    },
    FaultTypeNums: [],
    type: 1,
    FaultTypeChartData: [],
    noFaultTypeChartData: false,
    color: ['#01e1fb', '#00a8ff', '#3270ff', '#40e1d1', '#ff9900', '#ff6600', '#ff0000'],
  },

  /**
   * 组件的方法列表
   */
  methods: {
    GetData() {
      http.GetAuditTotalData().then(res => {
        if (res.code === 200) {
          const AuditNum = res.data.AuditNum;
          this.setData({
            SumInfo: {
              AuditConsNum: AuditNum ? AuditNum.AuditConsNum : 0,
              AuditFaultNum: AuditNum ? AuditNum.AuditFaultNum : 0,
              UntreatedNum: AuditNum ? AuditNum.UntreatedNum : 0,
            },
            FaultTypeNums: res.data.FaultTypeNums,
          });
          this.getFaultTypeData();
        }
      })
    },
    changeType(e) {
      const type = parseInt(e.currentTarget.dataset.type);
      if (this.data.type === type) return;
      this.setData({
        type: type
      });
      this.getFaultTypeData();
    },
    getFaultTypeData() {
      let list = []
      let noData = false;
      if (this.data.FaultTypeNums == null) {
        noData = true;
      } else {
        let typeData = null;
        if (this.data.type === 1) {
          typeData = this.data.FaultTypeNums.month;
        } else if (this.data.type === 2) {
          typeData = this.data.FaultTypeNums.week;
        } else if (this.data.type === 3) {
          typeData = this.data.FaultTypeNums.year;
        }
        if (typeData == null) {
          noData = true;
        } else {
          let total = 0;
          for (let k in typeData) {
            const val = typeData[k] ? typeData[k] : 0
            list.push({
              name: k,
              value: val
            });
            total += val;
          }
          for (var j = 0; j < list.length; j++) {
            list[j].rate = total === 0 ? 0 : ((list[j].value / total) * 100).toFixed(2);
            if(j > this.data.color.length){
              this.data.color.push(getRandomColor())
            }
          }
          noData = list.length === 0;
        }
      }
      this.setData({
        FaultTypeChartData: list,
        noFaultTypeChartData: noData
      });
      this.setAuditProblemChartOption();
    },
    initAuditProblemChart() {
      this.ecComponent_auditproblem.init((canvas, width, height, dpr) => {
        // 获取组件的 canvas、width、height 后的回调函数
        // 在这里初始化图表
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
        this.chart_auditproblem = chart;
        this.setAuditProblemChartOption();
        // 注意这里一定要返回 chart 实例，否则会影响事件处理等
        return chart;
      });
    },
    setAuditProblemChartOption() {
      if(!this.chart_auditproblem) return;
      if (this.data.FaultTypeChartData.length === 0) return;
      const option = {
        grid: {
          top: "0",
          left: "10",
          right: "10",
          bottom: "10",
          containLabel: true,
        },
        color: this.data.color,
        title: {
          text: "稽查问题",
          top: "middle",
          left: "center",
          textStyle: {
            color: "#606266",
            fontSize: 13,
            fontWeight: "bold",
          },
        },
        tooltip: {
          trigger: 'item',
          valueFormatter: function (val) {
            return val + " 个";
          },
          textStyle: {
            color: "#313131",
            fontSize: 13,
          },
          confine: true,
        },
        legend: {
          show: false,
          orient: "vertical",
          right: "20",
          top: "middle",
          itemWidth: 20,
          itemHeight: 15,
          textStyle: {
            color: "#606266",
            fontSize: 13,
          },
        },
        toolbox: {
          show: false,
        },
        series: {
          name: "稽查问题",
          type: "pie",
          clockWise: false,
          radius: ["45%", "70%"],
          center: ["50%", "50%"],
          hoverAnimation: false,
          avoidLabelOverlap: false,
          padAngle: 3,
          label: {
            show: false,
            formatter: "{b|{b}}\n{d|{d}%}",
            rich: {
              b: {
                fontSize: 12,
                color: "#606266",
                align: "left",
                width: "100%",
              },
              d: {
                fontSize: 14,
                color: "#606266",
                align: "left",
              },
            },
          },
          itemStyle: {
            borderRadius: 6,
          },
          data: this.data.FaultTypeChartData,
        },
      };
      this.chart_auditproblem.setOption(option);
    }
  }
})